<template>
    <div class="List">
        <div v-for="(item,index) of ListItem" :key="index" >
            <div @click="activeClick(index)" 
            :class="{active:currentIndex === index}" 
            class="list-item">
                {{item}} 
            </div>
        </div>
    </div>
</template>

<script>
 export default {
   name:'List',
   data(){
       return{
           ListItem:['','添加','管理','修改','设置','我的'],
           currentIndex:1
       }
   },
   methods:{
       activeClick(index){
           this.currentIndex = index
           this.$emit('itemClick',this.currentIndex)
       },
    //    tabSecond(e){
    //        this.$router.push('/profileAdd')
    //    }
   }
 }
</script>

 
<style scoped>
.List{
    display: flex;
    flex-direction: column;
    background-color: #3D3D3D;
    width: 140px;
    height: 100vh;
    color: #fff;
}
.list-item{
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.active{
    background-color: blueviolet;
}

</style>
